<template>
    <div>
        <Home></Home>
        <button @click="changeLength">length+1</button>
    </div>
</template>

<script>
import Home from './Home.vue'
import {computed} from 'vue'
export default {
    components: { Home },
    data() {
        return {
            length: 188
        }
    },
    // 对象写法
    // provide: {
    //     name: "why",
    //     age: 18,
    //     // length: this.length  //这样获取不到length
    // },
    // 函数写法
    // provide() {
    //     return {
    //         name: "why",
    //         age: 18,
    //         length: this.length  //函数写法就可以获取到
    //     }
    // },
    // 函数写法变成响应式 (provide不支持响应式)
    provide() {
        return {
            name: "why",
            age: 18,
            length: computed(()=>this.length) //ref对象 .value 
        }
    },
    methods:{
        changeLength(){
            this.length += 1
        }
    }
}
</script>

<style lang="scss" scoped>
</style>